homepage6047 Top Page

2018/6/24（日）

HTMLドキュメント用「タブ」 -[shopping]

本日は、自分で作った「タブ」のしくみでの提供です。（イラストは私じゃないです）

ブラウザが Internet Explorer だとちょっとタブの表示の具合が悪いみたいですが、また後日直します…。

「HTMLタブ」

▲大きな画像へリンク

ホームページをタグ打ちで製作している人向けに、JavaScriptによる「タブ」のしくみを作りました。タブのしくみを自分のページで手軽に使いたいときに、手軽に導入できます。

私はどうも人が使うために作品を整えるという作業が苦手なようで、いろいろなものを作っても一笑に付されることが多いとは思いますが、せっかく作ったし、私は個人的にはこの「タブ」の道具を使っていくつもりなので、みなさん向けに公開しようと思います。万一使ってみようと思う方がいれば、どうぞ自由に使ってください。

注：タブのサンプルとして「青空文庫」から文章を拝借しました。それら文章の著作権については、私は「青空文庫」の注意書きを読んだ上である程度理解して使用しているので大丈夫です。

プレビュー

▲大きな画像へリンク

プレビューと言っても、この文自体がそのタブのもとに書かれているので、これ自体がプレビューですが…

プログラムリスト

▲プログラムリスト表示へ

プログラムリストを見るには左の画像をクリックしてください。

いつも言うんですが、たとえ色分けしたとしても、コメントいっぱいつけても、人が作ったプログラムというのは、そう簡単に読めるものではないと思います。

今回のプログラムは基本的には、次の４つの関数で成り立っています。

tabinit()　…　タブ初期化
tabonresizex()　…　ウィンドウリサイズ時処理（tabinit()内で定義）
tabbuild()　…　タブ作成（タブ初期化から呼ばれる）
tabonclickx()　…　タブがクリックされたとき呼ばれる。

使用手順

▲使用手順表示へ

使用手順を見るには左の画像をクリックしてください。

せっかくタブで分けたのに、それだけかい↓↓

ダウンロード

20181230-htmlTab.zip　(56KB)

このタブで紹介したファイルと同じもの一式がZIPにまとめて入っています。

※「ピンク髪のメイドさん」画像はZIPに含まれていません。ほしい方は下記IllustACリンクにて無料なのでもらってください。

改変履歴


19/11/22(金) 12:13:04




1点修正。




管理人自身が利用したところ、上部のタブが１ドット左にずれて表示される現象（画面崩れ）があったので、修正しました。






18/12/30(日) 18:39:15




４点修正。




1.サンプルや使用手順での<STYLE>の記述で、CSSクラスtabのセレクタが間違っていたのを修正。




_使用手順.txt


javascript.html


sample.html


合計３ファイルの<STYLE>の記述を修正。




2.javascript.htmlでスクリプトが２重に実行されていたのを修正。




具体的には、


addEventListener( "load", tabinit, false );


に加えて、


<BODY onload="tabinit();">


としていたのを修正。




3._使用手順.txtに記載していた問題点の１つを解決




問題点：


×このタブを使用したページの容量が大きく読み込みに時間がかかると、タブの表示を組み立てる前の "ばらけた状態" が見えてしまいます。




これを直しました。


具体的には、


実際の見た目で編集する（wyswyg）タイプのHTMLエディタで開いた場合は各タブを表示し、


ブラウザで開いた場合はページロードが完了するまでは非表示、


ページロードが完了したら表示、とするようにした。




4.リサイズ時にレイアウトが崩れていたのを修正。




18/06/29(金) 21:28:12




Internet Explorerでタブの位置が下へ少しずれていたのを修正。




ボーダーが太いと、太い分、タブが下に位置していたのを修正。

※タブ内の「ピンク髪のメイドさん」のイラストはIllustAC（ピンク髪のメイドさん）の無料イラストを使わせていただきました。

2018/6/17（日）

3DCG入門用のサンプルプログラム -[3dcgprogram]

上のメニューの「20180203-3DCG」フォルダの中の「20180203-基本プログラム」フォルダには、以下のような3DCG入門用のサンプルプログラムがいくつか入っています。（DirectXやOpenGLではなく、3DCGの原理の式を用いた3DCGプログラムです。このホームページの先頭部分の四角形がすい星のようにグルグル回るアニメも原理の式を用いて描いています）

canvas - 1（点を描画）.html

↓

canvas - 2-1（線を描画）.html

↓

canvas - 2-2（線を描画）.html

↓

canvas - 3（陰面消去１）.html

↓

canvas - 4（陰面消去２）.html

↓

canvas - 5（物体回転）.html

↓

canvas - 6-1（複数）.html

↓

canvas - 6-2（複数）.html

↓

canvas - 7-1（視点の移動と回転）.html

↓

canvas - 7-2（視点の移動と回転）.html

↓

canvas - 8（陰影付け）.html

▲最初のプログラム

サンプルプログラムは連番になっていて、最初のプログラム（左図）はとてもシンプルな内容ですが、立派な3DCG計算を行っているプログラムです。

▲最後のプログラム

ファイルを順番に見ていく（上のメニューの「20180203-3DCG」フォルダの中の「20180203-基本プログラム」フォルダの「プログラムリスト（比較）」というリンクを順に見ていく）と、「ワイヤーフレーム」、「陰面消去」、「回転」などなど、3DCGの機能を追加していく様子がわかるようになっています。

上図の点だけのプログラムは順を追うと、左図のような立体的な画面を表示するプログラムに変わっていきます。

▲赤いマーカーで変更点を示している。

それぞれの　プログラムリスト（比較）　では、機能追加の部分を赤いマーカーで示しているので、前のプログラムからどこをどう変更すればその機能が実現されるのか分かりやすくなっています。

機能追加の部分を赤いマーカーで示したことによるメリットは以下の通りです。

その機能を実現するための変更点の量がひと目でわかる。
たとえば、正面を向いていた物体を回転させるために行ったプログラムの変更は「少しの座標計算の追加と、関数１個の追加だけ」など。
プログラムのどのタイミングでその変更を加えれば良いのかがわかる。

2018/6/15/（金）

画面から画面へのフェード -[javascript]

▲JavaScriptファイルへリンク

今回はゲームの画面遷移（読み：せんい。意味：うつり変わること）のサンプルを作りました。画面遷移を行う際にいきなり切り替えるのではなく、画面効果をあいだにはさんで切り替えています。

ちょっと思い立って、昔の PC-9801 というパソコンのゲームソフトでよく見られた画面効果を自分でもやってみました。

前画面から次画面へ切り替える際に、ピクセルをいじってじわじわと次の画面が現れるというものです。左の画像をクリックするとJavaScriptのページを表示します。表示された画面をクリックすると画面効果が動きます。

昔はこのような効果はマシン語（アセンブラ）を使わないと処理速度の関係でできなかったと思いますが、現在では JavaScript でお手軽にできてしまうようです。

プログラムリスト

2018/6/10（日）

今月の扉スクリプト

毎月ページを新しく切り替えるタイミングで何かしらの飾りを付けるようにしています。（休止していましたが再開？）

「今月は画面上をすい星のように尾を引きながらグルグル回る四角形」です。

人の変わる部分と変わらない部分

自分で出来上がったものをながめていて思ったんですが、私は昔とやっていることが変わっていないみたいです。

プログラミングの方法や計算の仕方はいろいろ知識が増えたのでだいぶ変わりましたが、発想の部分は何も変わっていません。どこか「すごみ」があって、人が見ることを考えてカラフルにし、いろいろな動きを思い付きでたくさん追加しています。

たとえば、昔16歳ぐらいのときは、やっぱり何かグルグル回るCGを作っていました。

言語はBASICだったし、計算方法として3DCG計算や三角関数は難しくて手が出ないのでコマ割り（PC-98というパソコンで上図のようにパレットを順に白に切り替えてパラパラアニメを行う）の方法を使っていました。それは学校の部活で製作していて、当時は上図と違ってもうちょっと複雑な模様になっていて、後ろでどなたかが腕を組んで関心を持って見てくれていました。当時PC-98というパソコンでは全画面を使ってダイナミックに動くアニメは処理速度として無理だったので珍しいアニメに見えたのかもしれません。（PC-98は16bit、12MHzでグラボはありませんでしたが、ハードウェア的なパレット切り替えという特殊能力がありました）

そのアニメと、今回のアニメの様子がよく似ているんです。

自分も色々変わったけど、やってることは昔と同じだな…。

たくわえる知識が右に行っても左に行っても、増えても減っても、「私」という発想の部分は３０年たっても変わることがない…。そんな気がしました。

また、「すごみ」を持たせる発想の人がいれば、逆に静かなものを作る発想の人もいて、人それぞれの「私」があるんだと思います。

プログラムリスト

プログラムリストの中で、変数が数の上限に達っしないようにチェックする部分をコメントアウトしているところがあります。その根拠となる計算を示しておきます。

4年という数字に0を300個加えたような年数がかかります。そんなに長い間上のアニメを動かしたりしないはずなのでオーバーフローのチェックは事実上不要でコメントアウトしました。0から一定値を加算していくようなプログラムでの話です。未知の数値同士を計算するような場合はオーバーフローのチェックは必要だと思います。

2018/6/7（木）

ドラゴンのモデル -[modeling]

Shade3Dで作成したドラゴンです。

Shade3Dの「ボーン」という機能を使うと、関節で動かすことができ、いろいろなポーズを取らせることができるようになります。

そして「FBX形式へエクスポート」すると、ポリゴンをテキストデータにすることができ、そのテキストを自分で JavaScript のデータに変換し、「原理で3DCG」のプログラムを使えば、JavaScript でこのドラゴンを動かすことができるようになります。

いつも同じことを繰り返し言っていますが、「原理で3DCG」は難しい計算を使わず、小学５年生の算数の「割合」の計算で成り立っています（Wikipedia - 3次元コンピューターグラフィックス - 原理 ※Wikipediaの説明は少し難しいです）。3DCGというのは実は割合の計算（四則演算）で描くことができます。ただし、計算は簡単ですが、プログラムは少し難しい感じになります。

→　原理で3DCG

▲大きな画像へリンク

Shade3Dでの製作画面の様子です。

2018/6/3（日）

マッププログラムの試作 -[rpg]

RPGで使うための、マッププログラムの試作です。

▲クリックすると JavaScript のページを開きます。
（Firefoxで開発。Chrome, IE, Edgeで動作確認済み）

上図をクリックしてページを開いたら、キーボードの上下左右でスクロールします。

簡単な世界地図になっていて、上陸すると国名が表示されます。（英語名）

あまり難しいプログラムを組まなくても、きれいなスクロールになりました。（※core i5マシンで作ったので、それよりも低速なマシンではきれいじゃないかもしれません）

スクロールすると画面の端っこで描画の乱れが見えますが、ファミコンもテレビの映像の設定をいじって端っこまでいっぱいに表示させると、端っこで描画の乱れが見えていたので、あえてそのままにしています。隠そうとすると少し面倒になる、、というのもあります。

プログラムリストはこちらです。→●

プログラムリストの説明：

（言葉だけの説明なのでちょっと分かりづらいかもしれません）

プログラムはライブラリなど使用せず単一のファイルで成り立っています。

Map というクラスを１つ作っています。（上記プログラムリストのリンク先で緑色で色分けした部分です）

プログラムはおもに、Map クラスとメインのプログラムの２つに大きく分かれています。プログラムの進行はこの２つを行き来する形になっています。

Map クラスと、メインのプログラムの両方に、それぞれ run() と draw() が用意されています。

最初に onload イベントが発生して onloadx() が実行されると、マップチップ画像のプリロード（あらかじめ読み込み）が行われます。

十字キーが押されると、Map クラス（緑色で色分けした部分）の scroll メソッドが呼ばれます。

scroll メソッドはマップのスクロールアニメーションのセッティングだけ行って終了します。

スクロールアニメーション（1ドットずつ16ドットまでスクロール）をする間は、キー入力を受け付けません。（keymap関数にて）

onloadx2() 関数の後のほうで書かれた setInterval() で run() が定期的に実行され、run() から map.run() が呼ばれます。map.run() でセッティングしたスクロールアニメーション（数値変更のみ）を進めています。run() の最後で draw() が実行され、変更された数値をもとに描画されるので、スクロールが目に見えて実行されます。

setInterval() が呼ぶ run() 関数では押されたキーの処理と、map.run() などが実行されます。

キー入力についてはこのプログラム（キーが押されたら一度配列にためこみ、setInterval() で定期的に処理）のようにすることでスムーズなキー入力ができるようになっています。

map.run() は画面描画の１ドットずらしの値 scrollX, scrollY を増やしています。16ドット増やし終わると、マップの座標を１増やします。

今回のマップ描画はちょっと意外でした。

自分が思っていた普通のマップ描画の処理は、

描いた画面全体を１つの画像として取得して１ドットずらして描画。16ドット分繰り返す。
空いた16ドットの新しい部分に、新しいマップチップを敷き詰める。
1番から繰り返す。

という手順で、これが速く処理するための工夫だと思っていました。しかし今回はこの手順の1番も2番も行わず、

すべてのマップチップを１ドットずらして描きなおす。16ドット分繰り返す。
マップの座標（＝キャラのマップ上の座標）を１進める。
1番から繰り返す。

という手順になっています。この手順のように「すべてのマップチップを毎回描く」というのは重い処理だと思っていたんですが、実際やってみるとそうでもないみたいです。最近のブラウザが処理が速いからでしょうか？

2018/6/2（土）

モンスターの起源 -[rpg]

モンスターを創造したとき、何かが実際に見えていた。しかしよくは見えなくて、それが何なのか考えて、"モンスター" に行き着いた。海を眺めていたら、遠く地平線に船の影が見えた。ずっとそこにたたずんでいる。幽霊船では？　（ちょっと文章がおかしい）

今の人はそれが何なのか知っている。だから新しいモンスターが生まれない。

いろいろ知りすぎて、神を信じなくなったし、サンタクロースも大人になれば「いない」とわかる。

でも、自分がそうやって何かを創造して楽しもうとするのではなく、自分以外の人（子供とか）に楽しいものを提供しよう、という動機なら、新しいものが作れるのかもしれない。

（2021年5月16日に文章を変更しました）